<template>
  <div id="topMain">
    <el-breadcrumb class="tab" :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ route.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="user">
      <p>欢迎你，{{ userInfo.account }}</p>
      <img :src="`http://127.0.0.1:5000/upload/imgs/acc_img/${userInfo.imgUrl}`" alt="" />
      <el-button type="primary" @click="clear">退出登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import router from '@/router'
const route = useRoute()
const userInfo = ref({})
userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
const clear = () => {
  localStorage.clear()
  router.push({ path: '/' })
  // location.reload()
}
</script>

<style scoped>
#topMain {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tab {
  }
  .user {
    width: 250px;
    display: flex;
    justify-content: space-evenly;
    align-items: end;
    img {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      background-size: contain;
    }
  }
}
</style>
